<template>
  <div class="project-tooltip-group group">
    <div
      class="project-btn"
    >
      <svg
        class="project-icon"
        width="25"
        height="25"
        viewBox="0 0 18 14"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M16.2 1.75H8.1L6.3 0H1.8C0.81 0 0 0.7875 0 1.75V12.25C0 13.2125 0.81 14 1.8 14H15.165L18 9.1875V3.5C18 2.5375 17.19 1.75 16.2 1.75Z"
          fill="#FFA000"
        ></path>
        <path
          d="M16.2 2H1.8C0.81 2 0 2.77143 0 3.71429V12.2857C0 13.2286 0.81 14 1.8 14H16.2C17.19 14 18 13.2286 18 12.2857V3.71429C18 2.77143 17.19 2 16.2 2Z"
          fill="#FFCA28"
        ></path>
      </svg>
      <p class="project-title">Project Structure</p>
    </div>
    <div class="project-tooltip">
      <ul class="project-list">
        <li class="level-1"><span>📁</span> <span class="ml-1">src</span></li>
        <li class="level-2"><span>📁</span> <span class="ml-1">app</span></li>
        <li class="level-3"><span>📄</span> <span class="ml-1">layout.js</span></li>
        <li class="level-3"><span>📄</span> <span class="ml-1">page.js</span></li>
        <li class="level-2"><span>📁</span> <span class="ml-1">components</span></li>
        <li class="level-3"><span>📄</span> <span class="ml-1">header.js</span></li>
        <li class="level-3"><span>📄</span> <span class="ml-1">footer.js</span></li>
        <li class="level-2"><span>📁</span> <span class="ml-1">styles</span></li>
        <li class="level-3"><span>📄</span> <span class="ml-1">globals.css</span></li>
      </ul>
    </div>
  </div>
</template>

<script setup lang="ts">
// 无需特殊逻辑
</script>

<style scoped>
.project-tooltip-group {
  position: relative;
  display: inline-block;
}
.project-btn {
  background: #fff;
  padding: 8px 20px;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.10);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: transform 0.3s, box-shadow 0.3s, border-radius 0.3s;
}
.project-btn:hover {
  transform: translateY(-4px);
  border-radius: 50%;
  box-shadow: 0 8px 32px rgba(255,193,7,0.18);
}
.project-icon {
  transition: color 0.2s;
}
.project-btn:hover .project-icon {
  color: #FFA000;
}
.project-title {
  font-weight: 500;
  color: #444;
  transition: color 0.2s;
}
.project-btn:hover .project-title {
  color: #FFA000;
}
.project-tooltip {
  position: absolute;
  left: 0;
  margin-top: 12px;
  width: 288px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.10);
  opacity: 0;
  transform: scale(0.95);
  pointer-events: none;
  transition: opacity 0.3s, transform 0.3s;
  z-index: 10;
}
.project-tooltip-group:hover .project-tooltip {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}
.project-list {
  padding: 18px 20px;
  margin: 0;
  list-style: none;
  color: #666;
  font-size: 15px;
  font-weight: 400;
}
.project-list li {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 2px;
}
.level-1 {
  padding-left: 0;
}
.level-2 {
  padding-left: 16px;
}
.level-3 {
  padding-left: 32px;
}
.ml-1 {
  margin-left: 2px;
}
.dark .project-btn {
  background: #23232a;
  color: #fff;
}
.dark .project-title {
  color: #fff;
}
.dark .project-tooltip {
  background: #23232a;
  border: 1px solid #333;
  color: #bbb;
}
.dark .project-list li {
  color: #bbb;
}
</style> 